{% load i18n %}
{% load compress %}
{% for sub in subs %}

{#<div class="panel-group" id="sub-accordion">#}
    <div class="panel panel-{% if sub.expire %}danger{% else %}success{% endif %}">
        <div class="panel-heading">
            <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#sub-{{ sub.id }}">
            {{ sub.plan.title }}
            </a>
        </div>
        <div id="sub-{{ sub.id }}" class="panel-collapse collapse in">
            <div class="panel-body">
{#            <div class="alert alert-success">111</div>#}
                <dl class="dl-horizontal">
                    <dt>{% trans "Start Time"%}</dt><dd>{{ sub.cycle_start }} SC</dd>
                    <dt>{% trans "Renew Time"%}</dt><dd>{{ sub.cycle_finish }} SC</dd>
                    <dt>{% trans "VPN  Username"%}</dt><dd><button type="button" class="btn btn-default btn-xs " data-toggle="modal" data-target="#change-sub-{{ sub.id }}" >{{ sub.username }}</button></dd>
                    <dt>{% trans "VPN Password"%}</dt><dd><button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#change-sub-{{ sub.id }}" >{{ sub.password }}</button></dd>
                    <dt>{% trans "Renew Cost"%}</dt><dd>{{ sub.plan.renew_cost }} SC / {{ sub.plan.cycle }} {% trans "Days"%}</dd>
                    <dt>{% trans "Auto renew"%}</dt><dd> <input type="checkbox" {% if sub.auto_renew %}checked{% endif %} id="renew-switch-{{ sub.id }}" value="{{ sub.id }}" class="switch"/> </dd>
                </dl>
                <div class="progress progress-striped active">
                    <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: {{ sub.used_percent}}%">
                    <span class="sr-only">{{ sub.used_percent}}% Complete</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
{#</div>#}

<div class="modal fade" id="change-sub-{{ sub.id }}" tabindex="-1" role="dialog" aria-labelledby="change-sub-{{ sub.id }}Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-body">
            <form class="form-inline ajax-sub-form change-sub-form" role="form" method="post" action="{% url 'geek-vpn-change-sub' %}" >
                {% csrf_token %}
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control"  placeholder="vpn username" name="username" value="{{ sub.abs_username }}">
                        <span class="input-group-addon">@{{ user.username }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control"  placeholder="Password" name="password" value="{{ sub.password }}">
                    <input type="hidden" name="subid" value="{{ sub.id }}">
                </div>

                <button type="submit" class="btn btn-default">{% trans "Update"%}</button>
            </form>


            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->










{% endfor %}

{% compress js %}
<script type="text/javascript">

$('.switch').wrap('<div class="switch switch-mini" />').parent().bootstrapSwitch();



$('.switch').on('switch-change', function (e, data) {
    console.log(data.value,data.el.context.value);
    $.post("{% url 'geek-vpn-change-renew-status' %}", { subid: data.el.context.value, status: data.value } );
});




    //sun passwrd 认证

    $(document).ready(function(){

        $('.change-sub-form').validate(
        {
            rules: {
                username : {
                    required : true,
                    minlength : 2,
                    maxlength : 10

                },
                password : {
                    required : true,
                    minlength : 8,
                    maxlength : 12
                }
            },
            errorPlacement: function(error,element) {
                return true;
              },

{#            errorElement: 'span',#}
{#            errorClass:'help-block',#}
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready




//  Ajax提交
$(document).ready(function() {
    $('.ajax-sub-form').ajaxForm({
        dataType:  'json',
        success:    function(data) {
            if (data.status == true){
                $('.modal').modal('hide');
                setTimeout(function(){get_subscription_content();}, 500);

            }
        }
    });
});
</script>
{% endcompress %}